<script type="text/javascript">
    function addFile()
    {
        var form = document.getElementById('fileContainer');
        var fileNode = document.createElement("input");
        var brNode = document.createElement("br");
        fileNode.type = "file";
        fileNode.name = "file[]";
        form.appendChild(fileNode);
        form.appendChild(brNode);
        var nof = document.getElementById('nof');
        nof.value = parseInt(nof.value) + 1;        
    }
</script>
<?php
    if(isset($uploadedFiles))
    {
        ?>
        <table border="1" style="width: 100%">
            <tr>
                <th width="200px">Preview</th>
                <th>Link</th>
            </tr>
            <?php
                foreach($uploadedFiles as $fileId)
                {
                    ?>
                    <tr>
                        <td><img src="<?php echo Utility::getSiteUrl() . '/file/id/' . $fileId;?>" style="max-width: 150px;" /></td>
                        <td><input type="text" value="<?php echo Utility::getSiteUrl() . '/file/id/' . $fileId;?>" style="width: 80%" /></td>
                    </tr>
                    <?php
                }
            ?>
        </table>
        <?php
    }
?>

<fieldset>
    <legend>Upload file</legend>
    <form id="uploadForm" method="post" action="<?php echo Utility::getSiteUrl(); ?>/upload/submit" enctype="multipart/form-data">
        <div id="fileContainer">
            <?php
                for($i = 0; $i < $numberOfFile; $i++)
                {
                ?>
            <input type="file" name="file[]" /><br />
                <?php
                }
                ?>
        </div>
        <br />
        <!--<input type="hidden" name="nof" value="<?php echo $numberOfFile; ?>" id="nof" />-->
        <input type="button" name="addBtn" onclick="addFile()" value="Add file" />
        <input type="submit" name="submit" value="Upload" />
    </form>
</fieldset>
